import React, { useEffect, useState } from "react";
import ImgUpload from "../../components/ImgUpload";
import { cateGet } from "../../api/course";
import RichEditor from "../../components/RichEditor";
import {artPost} from '../../api/course'
import {
  Form,
  Input,
  Button,
  Cascader,
  DatePicker,
  InputNumber,
  Switch,
  Upload,
} from "antd";
const { RangePicker } = DatePicker;
const { TextArea } = Input;

let initData = {
  //测试使用的默认数据包
  artname: "每日平静",
  artintro: "每天都需要整理一下自己的心情",
  price: 100,
  online: true,
};

const ArticlePub = () => {
  let [cateOption, setCateOption] = useState([]);
  useEffect(() => {
    cateGet().then((res) => {
      //获取并整理类目数据包
      let { results } = res.data;
      results = results.map((item) => ({
        ...item,
        value: item.objectId,
        label: item.catename,
      }));
      let list = results.filter((item) => item.father[0] == "100");
      for (let i = 0; i < results.length; i++) {
        //将数据包整理为多层表格列表数据
        let id = results[i].father[0];
        for (let j = 0; j < list.length; j++) {
          if (list[j].objectId == id) {
            let child = list[j].children ? list[j].children : [];
            list[j].children = [...child, results[i]];
            break;
          }
        }
      }
      // console.log(list);
      setCateOption(list);
    });
  }, []);
  const handleFinish = (values) => {
    let [catelv1,catelv2] = values.cateid
    values.catelv1 = catelv1
    values.catelv2 = catelv2
    console.log(values);
    artPost(values).then(res=>{
      console.log(res);
    })
  };
  return (
    <>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 18,
        }}
        layout="horizontal"
        initialValues={initData}
        onFinish={handleFinish}
      >
        <Form.Item
          label="课程名称"
          name="artname"
          rules={[{ required: true, message: "请输入课程名称" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="课程封面"
          name="poster"
          valuePropName="fileList"
          rules={[{ required: true, message: "请上传课程封面" }]}
        >
          <ImgUpload />
        </Form.Item>
        <Form.Item label="归属类目" name="cateid">
          <Cascader options={cateOption} />
        </Form.Item>
        <Form.Item label="课程简介" name="artintro">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          label="课程详情"
          name="detail"
          rules={[{ required: true, message: "请输入课程详情" }]}
        >
          <RichEditor />
        </Form.Item>
        <Form.Item label="课程价格" name="price">
          <InputNumber />
        </Form.Item>
        <Form.Item label="是否上架" valuePropName="checked" name="online">
          <Switch />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            确认
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default ArticlePub;
